<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'
import { defineEmits, defineProps } from "vue";
const props = defineProps({
  data: {
    type: Object,
    required: true
  },
  viewType: {
    type: String,
    default: 'add'
  }
})
const emit = defineEmits(["concel"]);
const tableData = ref<any>([{
  precisePosition: '5-2 煤二盘区水仓变电所140.1米',
  operateDateStart: '2022-03-01 09:00:00'
}])
const ruleFormRef = ref<FormInstance>()
const rules = ref<FormRules>({
  tourStaff: [
    { required: true, message: '请选择巡检人员', trigger: 'change' }
  ],
  operateDateStart: [
    { required: true, message: '请选择出入井时间', trigger: 'change' }
  ]
})
const formData = ref<any>({
  tourStaff: '',
  operateDateStart: '',
  operateDateEnd: ''
})
const staffList = ref<any>([
  {
    code: '1',
    name: '张三'
  },
  {
    code: '2',
    name: '李四'
  }
])
const daterange = ref<any>([])
const editIndex = ref(-1)
const dateChange = (val: any) => {
  formData.value.operateDateStart = val[0]
  formData.value.operateDateEnd = val[1]
}

function handleDele(row: any) {
  try {
    const index = tableData.value.findIndex((item: any) => item.id === row.id)
    tableData.value.splice(index, 1)
  } catch (error) {
    console.log(error)
  }
}

function handleEdit(row: any) {
  editIndex.value = tableData.value.indexOf(row)
  console.log(editIndex.value,'====a.value')
}

async function addSubmit() {
  ruleFormRef.value && ruleFormRef.value.validate(async (valid: any) => {
    if (valid) {
      tableData.value.push(formData.value)
      console.log(formData.value)
    }
  })
}

function handleSave(row: any) {
  editIndex.value = -1
  console.log(tableData.value)
}

function handleConcel(isResh: boolean) {
  emit("concel", isResh);
}

</script>

<template>
  <div>
    <el-form
    ref="ruleFormRef"
    :model="formData"
    label-position="right"
    label-width="100px"
    :rules="rules"
    :disabled="props.viewType === 'view'"
>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="巡检人员" prop="tourStaff">
            <el-select v-model="formData.tourStaff" clearable>
              <el-option v-for="item in staffList" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="出入井时间" prop="operateDateStart">
            <el-date-picker
                v-model="daterange"
                value-format="YYYY-MM-DD HH:mm:ss"
                type="datetimerange"
                style="width: 100%;"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="dateChange"
              />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-button>选择模版</el-button>
          <el-button type="primary" @click="addSubmit">添加位置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="tableData"
      border
      style="width: 100%;"
    >
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column prop="precisePosition" label="精确位置" min-width="180" align="center">
        <template #default="scope">
          <span v-show="scope.$index !== editIndex">{{ scope.row.precisePosition }}</span>
          <el-input
            v-show="scope.$index === editIndex"
            v-model="scope.row.precisePosition"
          />
        </template>
      </el-table-column>
      <el-table-column prop="operateDateStart" label="时间" min-width="150" align="center">
        <template #default="scope">
          <span v-show="scope.$index !== editIndex">{{ scope.row.operateDateStart }}</span>
          <el-date-picker
            v-if="scope.$index === editIndex"
            v-model="scope.row.operateDateStart"
            style="width: 100%;"
            type="datetime"
            placeholder="请选择时间"
            value-format="YYYY-MM-DD HH:mm:ss"
            format="YYYY/MM/DD HH:mm:ss"
          />
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="150">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)" :disabled="props.viewType === 'view'">
            编辑
          </el-button>
          <el-button type="primary" size="small" v-show="scope.$index === editIndex" @click="handleSave(scope.row)">保存</el-button>
          <el-button type="danger" size="small" @click="handleDele(scope.row)" :disabled="props.viewType === 'view'">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style=" margin: 20px;text-align: center;">
      <el-button @click="handleConcel(false)">取消</el-button>
      <el-button type="primary" @click="addSubmit">确定</el-button>
    </div>
  </div>
</template>
<style lang='scss' scope></style>
